0<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" charset="utf-8">
    <title>照片</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css" media="screen" title="no title" charset="utf-8">
    <script src="jq/jquery-3.1.0.js" charset="utf-8"></script>
    <script src="bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="css/starrySky.css" media="screen" title="no title" charset="utf-8">
    <style media="screen">
      body{
        background: black;
      }
      #nav{
        margin-top: -20px;
      }
      .row img{
        width: 100%;
        margin-bottom: 10px;
      }
      @keyframes tada {
        0% {
          -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
        }

        10%, 20% {
          -webkit-transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -4deg);
          transform: scale3d(.8, .8, .8) rotate3d(0, 0, 1, -4deg);
        }

        30%, 50%, 70%, 90% {
          -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, 4deg);
          transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, 4deg);
        }

        40%, 60%, 80% {
          -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -4deg);
          transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -4deg);
        }

        100% {
          -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
        }
      }
      .scaleImg{
        position: absolute;;
        top: 100px;
        left: 50%;
        margin-left: -250px;
        z-index: 1000;
        border: 2px solid orange;
        animation: tada 2s;
      }
      @media (max-width: 500px) {
        .row img{
          border: 2px solid orange;
          margin-bottom: 5px;
        }
        #footerNav li{
          float: left;
        }
        #footerNav li:nth-of-type(1){
          margin-left: 15px;
        }
      }
      #footerNav{
        margin-bottom: -20px;
        border-radius: 0;
      }

    </style>
  </head>
  <body>
    <!-- 导航 -->
    <nav id="nav" class="navbar navbar-inverse nav-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-target="#navShow" data-toggle="collapse">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <button type="button" class="btn btn-info" name="button">登录/注册</button>
        </div>

        <div id="navShow" class="collapse navbar-collapse">
          <ol class="nav navbar-nav">
            <li><a href="http://xinlingweidianying.applinzi.com/%E6%98%9F%E7%A9%BA/starrySky.html">主页</a></li>
            <li><a href="http://xinlingweidianying.applinzi.com/%E6%98%9F%E7%A9%BA/IMAGE.html">照片</a></li>
            <li><a href="">视频</a></li>
            <li><a href="http://xinlingweidianying.applinzi.com/%E6%98%9F%E7%A9%BA/NEWS.html">新闻</a></li>
          </ol>
        </div>
      </div>
    </nav>

    <!-- 照片墙 -->
    <div class="row">
      <div class="col-sm-3"><img class="image" src="source/101.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/102.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/103.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/107.jpg" alt="" /></div>
      <p class="clearfix visible-block"></p>
      <div class="col-sm-3"><img class="image" src="source/104.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/105.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/110.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/108.jpg" alt="" /></div>
      <p class="clearfix visible-block"></p>
      <div class="col-sm-3"><img class="image" src="source/112.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/115.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/116.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/117.jpg" alt="" /></div>
      <p class="clearfix visible-block"></p>
      <div class="col-sm-3"><img class="image" src="source/121.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/122.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/126.jpg" alt="" /></div>
      <div class="col-sm-3"><img class="image" src="source/128.jpg" alt="" /></div>
      <p class="clearfix visible-block"></p>
      <div class="col-sm-4"><img class="image" src="source/120.jpg" alt="" /></div>
      <div class="col-sm-4"><img class="image" src="source/127.jpg" alt="" /></div>
      <div class="col-sm-4"><img class="image" src="source/131.jpg" alt="" /></div>
      <p class="clearfix visible-block"></p>
      <div class="col-sm-6"><img class="image" src="source/109.jpg" alt="" /></div>
      <div class="col-sm-6"><img class="image" src="source/114.jpg" alt="" /></div>
      <p class="clearfix visible-block"></p>
      <div class="col-sm-4"><img class="image" src="source/130.jpg" alt="" /></div>
      <div class="col-sm-4"><img class="image" src="source/113.jpg" alt="" /></div>
      <div class="col-sm-4"><img class="image" src="source/118.jpg" alt="" /></div>
      <p class="clearfix visible-block"></p>
      <div class="col-sm-6"><img class="image" src="source/106.jpg" alt="" /></div>
      <div class="col-sm-6"><img class="image" src="source/129.jpg" alt="" /></div>
      <p class="clearfix visible-block"></p>
      <div class="col-sm-4"><img class="image" src="source/123.jpg" alt="" /></div>
      <div class="col-sm-4"><img class="image" src="source/125.jpg" alt="" /></div>
      <div class="col-sm-4"><img class="image" src="source/111.jpg" alt="" /></div>
    </div>

    <!-- 底部 -->
    <nav id="footerNav" class="navbar navbar-inverse">
      <div class="container">
        <ul class="nav navbar-nav">
          <li><a href="#">联系方式</a></li>
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">会员特权</a></li>
          <li><a href="#">商务合作</a></li>
        </ul>
      </div>
    </nav>
  </body>
</html>
<script type="text/javascript">
  // 照片墙上照片的点击缩放事件
  $('.image').on('click',function(){
    $(this).toggleClass('scaleImg');
  });
</script>
